<script setup lang="ts" >
import fileUpload from "@/components/file/fileUpload.vue"
import {UploadFilled} from "@element-plus/icons-vue";
import PanelBox from "@/components/ProjectPanel/panel.vue";
import {getToken} from "@/utils/auth.ts";
import {ElNotification} from "element-plus";

const headers = {
  Authorization: getToken()
}

const handleSuccess = (res:any) => {
  console.log(res)
  if (res.code === 500){
    ElNotification({
      title: res.msg,
      type: 'error',
      showClose: false,
    });
  }
}
</script>
<template>
  <panel-box :has-body="true" :has-body-title="true">
    <template #body-title>
      <span>文件上传（用作与普通上传与分片上传对比）</span>
    </template>
    <template #body-table>
      <div class="upload-bg">
        <file-upload pid="0">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            <em>点击进行分片上传</em>
          </div>
        </file-upload>
      </div>
      <div class="upload-bg">
        <el-upload
            class="upload-demo"
            drag
            action="http://127.0.0.1:8013/minio/commentUpload"
            :headers="headers"
            multiple
            :on-success="handleSuccess"
            :before-upload="handleBefore"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            普通文件上传<em>数据信息不存储在数据表中</em>
          </div>
        </el-upload>
      </div>
    </template>
  </panel-box>

</template>
<style lang="scss" scoped>
//::v-deep(.el-upload-dragger){
//
//}

.upload-bg{
  width: calc(100% - 100px);
  height: 100%;
  padding-top: 10px;
  margin: auto;
}
</style>
